<template>
	  <div class="shopcart-container">
		    
		<!-- 商品列表 -->
		    <div class="goods-list">
			      
			<!-- 商品列表项区域 -->
			      <div class="mui-card">
				        <div class="mui-card-content" v-for="(item) in goodslist" :key="item.id">
					          <div class="mui-card-content-inner flex">
						            <img :src="item.image">
						            <div class="info">
							              <h1>{{ item.name }}</h1>
							              <p class="flex">
								                <span class="price">¥{{ item.price }}</span>
								                <span>x{{ item.count }}</span>
								              </p>
							            </div>
						          </div>
					        </div>
				        
				<!-- 配送信息 -->
				        <div class="process-info">
					          <p>
						            <strong>配送服务</strong>
						            <strong>快递运输</strong>
						          </p>
					          <p>
						            <span>中小件送货时间</span>
						            <span>工作日、双休日与节假日均可送货</span>
						          </p>
					        </div>
				        
				<!-- 订单备注 -->
				        <div class="store-info">
					          <strong>订单备注</strong>
					          <textarea v-model="note" type="text" placeholder="选填，给商家留言"></textarea>
					        </div>
				      
			</div>
			    
		</div>
		    
		<!-- 运费信息 -->
		    <ul class="fare-info mui-card">
			      <li class="fare-price flex">
				        <span>商品金额</span>
				        <span class="red">¥{{ amount.toFixed(2) }}</span>
				      </li>
			      <li class="fare-price flex">
				        <span>运费</span>
				        <span class="red">¥0.00</span>
				      </li>
			      <li class="fare-price flex">
				        <span><strong>总价</strong></span>
				        <span class="red">¥{{ amount.toFixed(2) }}</span>
				      </li>
			      
			<!-- 创建订单按钮 -->
			      <div class="flex">
				        <button class="mui-btn mui-btn-primary mui-btn-block">创建订单</button>
				      </div>
			    
		</ul>
		  
	</div>
</template>
<script>
	import {
		mapGetters,
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				goodslist: [],
				amount: 0,
				note: ''
			}
		},
		computed: {
			...mapState('shopcart', ['buy']),
			...mapGetters('shopcart', ['getBuy'])
		},
		created() {
			this.getGoodsList()
		},
		methods: {
			getGoodsList() {
				var idArr = []
				this.buy.forEach(item => idArr.push(item.id))
				if (idArr.length <= 0) {
					return
				}
				this.$indicator.open({
					text: '加载中'
				})
				var params = {
					ids: idArr
				}
				this.$http.get('shopcart', {
					params: params
				}).then(res => {
					this.$indicator.close()
					if (res.data.code === 1) {
						this.goodslist = res.data.data
						var amount = 0
						this.goodslist.forEach(item => {
							item.count = this.getBuy[item.id].count
							amount += item.count * item.price
						})
						this.amount = amount
					}
					window.console.log(res.data)
				})
			}
		}
	}
</script>
